初學者好好用 Chrome 開發者工具


Posted by cmtilo on 2021-04-26

在寫程式卡關搞不清除程式碼怎麼跑的時候很好用~推薦

STEP1

首先我們開一個檔案,先打好網頁基本格式,將javascript程式碼寫在標籤裡面,把檔案副檔名存成.html。
基本格式大概長這樣:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        function solve(lines) {
            //這邊有你打的程式碼...程式碼...
        }

        solve(lines) //呼叫執行function
    </script>
</body>
</html>

STEP2

然後用 Chrome 瀏覽器執行html檔。

STEP3

按 F12 打開 Chrome 開發者工具。


以上大家應該都清楚,接下來神奇的來了!

STEP4

在程式碼加上一行debbuger你就可以看到程式一行一行的跑~

sublime 畫面

說明:javascript程式碼最前方加上一行debbuger

Chrome 瀏覽器畫面

說明:按小箭頭→就可以逐步看程式碼執行的步驟

再也不用擔心自己想的跟電腦想的不一樣了~


#初學者







Related Posts

如何不使用 create-react-app 自己打造應用程式

如何不使用 create-react-app 自己打造應用程式

[Day 07] 備忘錄模式,蠅量級模式,拜訪者模式,單元測試

[Day 07] 備忘錄模式,蠅量級模式,拜訪者模式,單元測試

About Me || 【閱讀激發思考,寫作捕捉思路】

About Me || 【閱讀激發思考,寫作捕捉思路】


Comments